<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<title>Resizable Visual Test : Resizable ticket #5335</title>
		<link rel="stylesheet" href="../visual.css" type="text/css" />
		<link rel="stylesheet" href="../../../themes/base/jquery.ui.all.css" type="text/css" />
		<script type="text/javascript" src="../../../jquery-1.7.1.js"></script>
		<script type="text/javascript" src="../../../ui/jquery.ui.core.js"></script>
		<script type="text/javascript" src="../../../ui/jquery.ui.widget.js"></script>
		<script type="text/javascript" src="../../../ui/jquery.ui.mouse.js"></script>
		<script type="text/javascript" src="../../../ui/jquery.ui.draggable.js"></script>
		<script type="text/javascript" src="../../../ui/jquery.ui.droppable.js"></script>
		<script type="text/javascript" src="../../../ui/jquery.ui.resizable.js"></script>
		<script type="text/javascript">
		$(function() {
				$('.item.to-be-draggable').draggable({ revert: true });
				$('.item').resizable({ maxWidth: 500, minHeight: 150, minWidth: 170, maxHeight: 400,handles: 'n,s' });
			}
		);
		</script>
		<style type="text/css">
			#main { 
				width: 900px; 
				height: 500px; 
				overflow: scroll;
			}
			.item {
				width: 170px;
				height: 150px;
				margin: 10px;
				border: 1px solid #aaa;
			}
			#sub {
				height: 2000px;
			}
			.i1 { background-color: #acacac; }
			.i2 { background-color: #bcacac; }

		</style>
	</head>
	<body>
		<h1 class="ui-widget-header"><a href="http://dev.jqueryui.com/ticket/5335">#5335 - Resizable: position set to absolute at end of resize</a></h1>
		<div id="main">
			<div id="sub">
				<div class="item i1 to-be-draggable">Draggable</div>
				<div class="item i2">Not draggable</div>
			</div>

		</div>
	</body>
</html>
